<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .testimonial-section {
            background: #f1f1f1;
            padding: 80px 0;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
        }

        .inner-width {
            max-width: 100%;
            margin-top: auto;
            padding: 0 20px;
            text-align: center;
        }

        .testimonial-section h1 {
            font-family: "Fredericka the Great";
            font-weight: 400;
            letter-spacing: 10px;
            text-transform: uppercase;
            font-size: 35px;
            margin:0 auto;
        }

        .testimonial-pics {
            padding: 40px 0;
            margin:0 auto;
        }

        .testimonial-pics img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 20px;
            filter: grayscale(100%);
            transition: .3s;
            cursor: pointer;
        }

        .testimonial-pics img:hover, .testimonial-pics img.active {
            filter: none;
        }

        .testimonial-contents {
            max-width: 600px;
            text-transform: uppercase;
            margin:0 auto;

        }

        .testimonial {
            display: none;
        }

        .testimonial.active {
            display: block;
        }

        .testimonial p {
            color: #5c5c5c;
            margin-bottom: 20px;
        }

        .testimonial p, span {
            font-family: 萝莉体;
            font-size: 18px;
        }

        .testimonial .description {
            text-transform: uppercase;
            letter-spacing: 4px;
        }
    </style>
</head>
<body>

<div class="testimonial-section">
    <div class="inner-width">
        <h1>About Partners</h1>
        <div class="testimonial-pics">
            <img src="/static/1.jpg" alt="test-1" class="active">
            <img src="/static/2.jpg" alt="test-2">
            <img src="/static/3.jpg" alt="test-3">
            <img src="/static/4.jpg" alt="test-4">
            <img src="/static/5.jpg" alt="test-5">
            <img src="/static/6.jpg" alt="test-6">
        </div>

        <div class="testimonial-contents">
            <div class="testimonial active" id="test-1">
                <p>
                    用户注册+登录+个人信息修改
                </p>
                <p>
                    用户浏览商家列表
                </p>
                <span class="description">颜醉</span>
            </div>
            <div class="testimonial" id="test-2">
                <p>
                    用户管理购物车[商品件数->价格小计->价格总计]
                </p>
                <p>
                    加入用户积分的计算
                </p>
                <span class="description">陈治宇</span>
            </div>
            <div class="testimonial" id="test-3">
                <p>
                    商家对名下的店铺管理
                </p>
                <p>
                    商家对餐品管理
                </p>
                <span class="description">黄飚刚</span>
            </div>
            <div class="testimonial" id="test-4">
                <p>
                    商家注册+登录
                </p>
                <p>
                    商家编辑商家信息
                </p>
                <p>
                    商家处理退款订单
                </p>
                <span class="description">黄鉴斌</span>
            </div>
            <div class="testimonial" id="test-5">
                <p>
                    用户进入下单流程,选择或填写收获地址,下单
                </p>
                <p>
                    用户查看我的订单,订单退款、签收、评论
                </p>
                <span class="description">黄荣臻</span>
            </div>
            <div class="testimonial" id="test-6">
                <p>
                    用户选择商家,查看商家详情,餐品列表
                </p>
                <p>
                    用户评论查看
                </p>
                <p>
                    用户点餐,加入购物车
                </p>
                <span class="description">曾威</span>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(".testimonial-pics img").click(function () {
        $(".testimonial-pics img").removeClass("active");
        $(this).addClass("active");

        $(".testimonial").removeClass("active");
        $("#" + $(this).attr("alt")).addClass("active");
    })
</script>

</body>
</html>
